<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目列表</title>
    <link rel="stylesheet" href="/css/elementUI.css">
    <script src="/js/vue.js"></script>
    <script src="/js/elementUI.js"></script>
    <script src="/js/axios.js"></script>
</head>
<body>

<div id="app">
    <h2>欢迎你：{{userInfo.user.username}}，部门信息：{{userInfo.user.dname}}</h2>

    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id" width="50"
                label="序号">
        </el-table-column>
        <el-table-column
                prop="code"
                label="项目编码">
        </el-table-column>
        <el-table-column
                prop="name"
                label="项目名称">
        </el-table-column>
        <el-table-column
                prop="type"
                label="项目类型">
        </el-table-column>
        <el-table-column
                label="开始时间">
            <template slot-scope="scope">
                {{scope.row.start | format('yyyy-MM-dd')}}
            </template>
        </el-table-column>
        <el-table-column
                label="结束时间">
            <template slot-scope="scope">
                {{scope.row.end | format('yyyy-MM-dd')}}
            </template>
        </el-table-column>
        <el-table-column
                label="创建时间">
            <template slot-scope="scope">
                {{scope.row.createTime | format('yyyy-MM-dd hh:mm:ss')}}
            </template>
        </el-table-column>
        <el-table-column
                prop="createUsername"
                label="创建人">
        </el-table-column>
        <el-table-column
                prop="state"  width="80"
                label="状态">
        </el-table-column>
        <el-table-column
                label="审核状态">
            <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.shenheState=='通过'">{{scope.row.shenheState}}</el-tag>
                <el-tag type="info" v-if="scope.row.shenheState=='审核中'">{{scope.row.shenheState}}</el-tag>
                <el-tag type="danger" v-if="scope.row.shenheState=='未通过'">{{scope.row.shenheState}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column width="250"
                label="操作">
            <template slot-scope="scope">
                <div v-if="scope.row.shenheState=='审核中'">
                    <el-button size="mini" type="success" @click="changeState(scope.row.id,'通过')">通过</el-button>
                    <el-button size="mini" type="danger" @click="changeState(scope.row.id,'未通过')">不通过</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog title="新建项目" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="编码" :label-width="formLabelWidth">
                <el-input v-model="form.code" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="介绍" :label-width="formLabelWidth">
                <el-input v-model="form.intro" type="textarea" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.start"
                        type="date"
                        placeholder="选择开始日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" :label-width="formLabelWidth">
                <el-date-picker
                        v-model="form.end"
                        type="date"
                        placeholder="选择结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-radio v-model="form.state" label="已结束">已结束</el-radio>
                <el-radio v-model="form.state" label="进行中">进行中</el-radio>
            </el-form-item>
            <el-form-item label="类型" :label-width="formLabelWidth">
                <el-select v-model="form.type" placeholder="请选项目类型">
                    <el-option label="代理" value="代理"></el-option>
                    <el-option label="服务" value="服务"></el-option>
                    <el-option label="分包" value="分包"></el-option>
                    <el-option label="综合" value="综合"></el-option>
                    <el-option label="自营" value="自营"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addProgram">确 定</el-button>
        </div>



</div>
<script>
    new Vue({
        el:"#app",
        data:{
            userInfo:{},
            tableData:[],
            query:{
                page:1,
                pageSize:2
            },
            total:0,
            //表单添加需要
            dialogFormVisible: false,
            form: {
                name: '',
                code:"",
                type:"",
                intro:"",
                start:"",
                end:"",
                state:"",
            },
            formLabelWidth: '120px'
        },
        watch:{
            query:{
                deep:true,
                handler(){
                    this.initData()
                }
            }
        },
        filters:{
            format(value,arg){
                function dateFormat(date, format) {
                    if (typeof date === "string") {
                        var mts = date.match(/(\/Date\((\d+)\)\/)/);
                        if (mts && mts.length >= 3) {
                            date = parseInt(mts[2]);
                        }
                    }
                    date = new Date(date);
                    if (!date || date.toUTCString() == "Invalid Date") {
                        return "";
                    }
                    var map = {
                        "M": date.getMonth() + 1, //月份
                        "d": date.getDate(), //日
                        "h": date.getHours(), //小时
                        "m": date.getMinutes(), //分
                        "s": date.getSeconds(), //秒
                        "q": Math.floor((date.getMonth() + 3) / 3), //季度
                        "S": date.getMilliseconds() //毫秒
                    };
                    format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
                        var v = map[t];
                        if (v !== undefined) {
                            if (all.length > 1) {
                                v = '0' + v;
                                v = v.substr(v.length - 2);
                            }
                            return v;
                        } else if (t === 'y') {
                            return (date.getFullYear() + '').substr(4 - all.length);
                        }
                        return all;
                    });
                    return format;
                }

                return dateFormat(value,arg);

            }
        },
        methods:{
            changeState(id,shenheState){
                let obj = {
                    id:id,
                    shenheState:shenheState
                }
                axios.post("/program/update",obj).then(res=>{
                    this.$message.success("操作成功")
                    this.initData();
                })
            },
            handleSizeChange(val) {
                this.query.pageSize = val
            },
            handleCurrentChange(val) {
                this.query.page = val
            },
            addProgram(){
                axios.post("/program/add",this.form,{
                    headers: {
                        'token': this.userInfo.token,
                    }
                }).then(res=>{
                    this.form = {
                        name: '',
                        code:"",
                        type:"",
                        intro:"",
                        start:"",
                        end:"",
                        state:"",
                    }
                    this.dialogFormVisible = false;
                    this.initData();
                })

            },
            toAdd(){
                this.dialogFormVisible = true;

            },
            initData(){
                axios.post(`/program/findPage?page=${this.query.page}&pageSize=${this.query.pageSize}`).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })

            }

        },
        created(){

            this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
            this.initData()
        }
    })
</script>

</body>
</html>